<template>

  <div class="bg" style="height:auto;overflow:scroll" @scroll="handleScroll">

    <el-header class="el-header" height="150px">
      <div style="width: 100%;margin: 0 auto">
             <span :span="12">
            <img  src="../../public/static/picture/logo.jpg" style="width: 40px;height:40px;vertical-align: middle" alt="">
            </span>
        <span style="position: relative;top: 13px;margin-left:1px;font-size: x-large" >拾文博客</span>
        <span  style="float:right;">
              <el-button @click="publish" > <i class="el-icon-s-promotion" ></i>发布</el-button>
            </span>
        <el-dropdown :hide-on-click="false" style="float: right;font-size: 20px;color: #ffffff">
          <el-avatar style="vertical-align: center;overflow: hidden;margin-top: 10px;margin-right: 20px" :size="40" :src="avatarUrl"></el-avatar>

          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>
              <a href="javascript:void(0)" @click="login">{{log}}</a>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>


        <!--        <el-row>-->
        <!--        <el-col :span="6">-->
        <!--          <el-form-item  label="游客头像" prop="touristAvatar">-->
        <!--            <el-upload-->
        <!--                class="avatar-uploader1"-->
        <!--                action-->
        <!--                ref="upload"-->
        <!--                :show-file-list="false"-->
        <!--                :disabled="!canUpdate"-->
        <!--                :action="uploadPictureHost"-->
        <!--                :before-upload="uploadBefore"-->
        <!--                :http-request="touristUpload">-->
        <!--              <img style="width: 100px;height: 100px" v-if="form.touristAvatar" :src="form.touristAvatar" class="avatar1">-->
        <!--              <i v-else class="el-icon-plus avatar-uploader-icon1"></i>-->
        <!--            </el-upload>-->
        <!--          </el-form-item>-->
        <!--        </el-col>-->
        <!--        </el-row>-->

        <span style="float:right;margin-right: 10px" v-if="Token.trim().length>0" >
              <el-badge :value="countAllSize" :max="99" class="item">
                  <i class="el-icon-message-solid" style="font-size:25px;position: relative;right:8px;top: 2px" @click="countAllSizeMountedClick"></i></el-badge>
            <el-divider direction="vertical"></el-divider>
            </span>

        <span   style="float:right;margin-right: 10px">
              <a @click="userCenter">个人中心</a>
              <el-divider direction="vertical"></el-divider>
            </span>

        <span style="float:right;margin-right: 10px">
             <a @click="localPage"> 首页</a>
            <el-divider direction="vertical"></el-divider>
            </span>

      </div>
      <!--*********蓝色导航条开始**********-->
      <div style="width:100%;height: 60px;background-color: #cedebd">
        <el-menu style="width: 100%;margin: 0 auto" mode="horizontal"
                 :default-active="active" class="el-menu-demo"
                 background-color="#cedebd"
                 text-color="#fff"
                 active-text-color="#fff"
        >
          <el-menu-item @click="categoryDetail(c.id)" v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
          <!--搜索框开始-->
          <div style="float: right;margin-right: -130px">
            <!--@keydown.native.enter回车键按下事件-->
            <el-input placeholder="请输入内容" @keydown.native.enter="search()" v-model="wd"  class="input-with-select">
              <el-button slot="append" icon="el-icon-search" @click="search()"></el-button>
            </el-input>
          </div>
          <!--搜索框结束-->
        </el-menu>
      </div>
    </el-header>

    <!-- 用户栏   -->
    <el-card class="box-card" style="margin: 60px 220px 20px;height:auto">
      <div class="text item" >
        <img style="width: 66px;height:66px;margin-right: 20px" :src="this.user.avatar">
        <p style="margin-left: 100px; margin-top: -66px;font-size: 20px">用户名 : {{user.nick}}</p>
      </div>

      <div style="margin-top: 10px; margin-left: 100px">
        <span>
          <b style="font-size: 28px">{{ user.articleCount }}</b><i>文章</i>
          <b style="margin-left: 60px; font-size: 28px">{{user.beanCount}}</b><i>粉丝</i>
        </span>
      </div>

      <div style="margin-top: 10px; margin-left: 100px">
        <span>加入博客的时间:{{ user.createdTime }}</span>
      </div>
      <div style="margin-top: 10px; margin-left: 100px">
        <span>个人简介:{{ user.signature }}</span>
      </div>

      <div style="position:absolute; right: 300px; top: 250px" @click="cardPopup()">
        <el-row>
          <el-button icon="el-icon-document" size="medium" round>编辑资料</el-button>
        </el-row>
      </div>
    </el-card>

    <!--  用户栏下面的功能栏  -->
    <el-card class="box-card" style="margin: 20px 220px 20px;height:auto" >
      <el-tabs v-model="activeName" @tab-click="handleClick" style="margin-left: 50px">
        <el-tab-pane label="文章" name="second">
          <el-tabs style="height: 200px;height:auto;" v-model="activeName1" @tab-click="handleClick">
            <el-tab-pane label="审核成功" name="second1">
              <el-card class="box-card">

                <!--**********文章列表开始*********-->
                <el-row>
                  <el-col v-for="a in articleArr">

                    <el-card style="margin-bottom: 10px;height: auto; width: 1320px">
                      <el-row >
                        <el-button type="text" class="button" @click="sentMesg(a.id)">
                        <el-col :span="18" align="left" style="margin-top: -20px">
                          <h1>{{a.title}}</h1>
                        </el-col>
                        </el-button>
                        <!--                    简述-->
                        <el-col>
                          <i>{{a.brief}}</i>
                        </el-col>

                        <el-col :span="18" align="left" style="margin-top: 20px">
                      <span style="margin: 0 40px 0 0">
                        <el-tag size="mini" v-for="b in a.tags" >{{b}}</el-tag></span>
                          <i class="el-icon-watch"></i>
                          <span style="margin: 0 40px 0 0">{{a.gmtCreatePush}}发布</span>
                          <i class="el-icon-view"></i>
                          <span style="margin: 0 40px 0 0">{{a.praiseCount}}点赞</span>
                          <i class="el-icon-chat-dot-round"></i>
                          <span style="margin: 0 40px 0 0">{{a.commentCount}}评论</span>
                          <i class="el-icon-chat-dot-round"></i>
                          <span style="margin: 0 40px 0 0">{{a.viewCount}}阅读量</span>
                        </el-col>

                      </el-row>
                      <el-row >
                        <el-button @click="deleteByarticleId(a.id)" style="float: right;margin-right: 30px; margin-top: -80px" type="danger" round>删 除</el-button>
                      </el-row>
                    </el-card>

                  </el-col>
                </el-row>
                <!--**********文章列表结束*********-->
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="待审核" name="second2">
              <el-card class="box-card">

                <!--**********文章列表开始(待审核)*********-->
                <el-row>
                  <el-col v-for="a in articleArr">
                    <el-card style="margin-bottom: 10px;height: 150px" >
                      <el-row >
                        <el-col :span="18" align="left" style="margin-top: -10px">
                          <h2>{{a.title}}</h2>
                        </el-col>
                        <!--                    简述-->
                        <el-col>
                          <i>{{a.brief}}</i>
                        </el-col>

                        <el-col :span="18" align="left" style="margin-top: 20px">
                      <span style="margin: 0 40px 0 0">
                        <el-tag size="mini" v-for="b in a.tags" >{{b}}</el-tag></span>
                          <i class="el-icon-watch"></i>
                          <span style="margin: 0 40px 0 0">{{a.gmtCreatePush}}发布</span>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
                <!--**********文章列表结束(待审核)*********-->
              </el-card>
            </el-tab-pane>
            <el-tab-pane label="审核失败" name="second3">
              <el-card class="box-card">

                <!--**********文章列表开始(审核不通过)*********-->
                <el-row>
                  <el-col v-for="a in articleArr">
                    <el-card style="margin-bottom: 10px;height: 150px" >
                      <el-row >
                        <el-col :span="18" align="left"  style="margin-top: -10px">
                          <h2>{{a.title}}</h2>
                        </el-col>
                        <!--                    简述-->
                        <el-col>
                          <i>{{a.brief}}</i>
                        </el-col>

                        <el-col :span="18" align="left" style="margin-top: 20px">
                      <span style="margin: 0 40px 0 0">
                        <el-tag size="mini" v-for="b in a.tags" >{{b}}</el-tag></span>
                          <i class="el-icon-watch"></i>
                          <span style="margin: 0 40px 0 0">{{a.gmtCreatePush}}发布</span>
                          <i class="el-icon-view"></i>
                          <span style="margin: 0 40px 0 0">审核不通过原因:{{a.message}}</span>
                        </el-col>
                      </el-row>
                    </el-card>
                  </el-col>
                </el-row>
                <!--**********文章列表结束(审核不通过)*********-->
              </el-card>
            </el-tab-pane>
          </el-tabs>

          <!--          <el-card class="box-card">

                      &lt;!&ndash;**********文章列表开始*********&ndash;&gt;
                      <el-row>
                        <el-col v-for="a in articleArr">
                          <el-card style="margin-bottom: 10px;height: 150px" >
                            <el-row >
                              <el-col :span="18" align="left">
                                <h1>{{a.title}}</h1>
                              </el-col>
          &lt;!&ndash;                    简述&ndash;&gt;
                              <el-col style="margin-top: 10px">
                                <i>{{a.brief}}</i>
                              </el-col>

                              <el-col :span="18" align="left" style="margin-top: 20px">
                                <span style="margin: 0 40px 0 0">
                                  <el-tag size="mini" v-for="b in a.tags" >{{b}}</el-tag></span>
                                <i class="el-icon-watch"></i>
                                <span style="margin: 0 40px 0 0">{{a.gmtCreatePush}}发布</span>
                                <i class="el-icon-view"></i>
                                <span style="margin: 0 40px 0 0">{{a.praiseCount}}点赞</span>
                                <i class="el-icon-chat-dot-round"></i>
                                <span style="margin: 0 40px 0 0">{{a.commentCount}}评论</span>
                                <i class="el-icon-chat-dot-round"></i>
                                <span style="margin: 0 40px 0 0">{{a.viewCount}}阅读量</span>
                              </el-col>
                            </el-row>
                          </el-card>
                        </el-col>
                      </el-row>
                      &lt;!&ndash;**********文章列表结束*********&ndash;&gt;
                    </el-card>-->
        </el-tab-pane>

        <el-tab-pane label="收藏" name="third">
          <el-card class="box-card">

            <!--**********文章列表开始*********-->
            <el-row>
              <el-col v-for="a in collectionArticleArr">
                <el-card style="margin-bottom: 10px;height: auto" >
                  <el-row >
                    <el-col :span="18" align="left"  style="margin-top: -10px">
                      <h3>{{a.title}}</h3>
                    </el-col>
                    <!--                    简述-->
                    <el-col>
                      <i>{{a.brief}}</i>
                    </el-col>

                    <el-col :span="18" align="left" style="margin-top: 20px">
                      <span style="margin: 0 40px 0 0">
                        <el-tag size="mini" v-for="b in a.tags" >{{b}}</el-tag></span>
                      <i class="el-icon-watch"></i>
                      <span style="margin: 0 40px 0 0">{{a.gmtCreatePush}}发布</span>
                      <i class="el-icon-view"></i>
                      <span style="margin: 0 40px 0 0">{{a.collectionTime}}收藏</span>
                      <i class="el-icon-view"></i>
                      <span style="margin: 0 40px 0 0">{{a.praiseCount}}点赞</span>
                      <i class="el-icon-chat-dot-round"></i>
                      <span style="margin: 0 40px 0 0">{{a.commentCount}}评论</span>
                      <i class="el-icon-chat-dot-round"></i>
                      <span style="margin: 0 40px 0 0">{{a.viewCount}}阅读量</span>
                    </el-col>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
            <!--**********文章列表结束*********-->
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="浏览历史" name="history">
          <el-card class="box-card">

            <!--**********浏览历史列表开始*********-->
            <el-row>
              <el-col v-for="a in historyArr">
                <el-button type="text" class="button" @click="sentMesg(a.articleId)">
                <el-card style="margin-bottom: 10px;height: 100px;overflow:hidden;width: 1320px" >
                  <el-row >
                    <el-col :span="18" align="left" style="margin-top: -12px">
                      <h3>{{a.title}}</h3>
                    </el-col>

                    <!--                    简述-->
                    <el-col style="margin-top: 10px">
                      <i style="float: left" class="el-icon-s-custom">{{a.nick}}</i>
                      <i style="float: right">{{a.viewTime}}</i>
                    </el-col>
                  </el-row>
                </el-card>
                </el-button>
              </el-col>
            </el-row>
            <!--**********浏览历史列表结束*********-->
          </el-card>
        </el-tab-pane>

        <el-tab-pane label="关注的人" name="follow">

          <el-card class="box-card">

            <!--**********关注博主列表开始*********-->
            <el-row>
              <el-col v-for="a in followArr">
                <el-card style="margin-bottom: 10px;height: 100px;overflow:hidden" >
                  <el-row>
                    <el-col :span="18" align="left" style="margin-top: -30px">
                      <h3>{{a.nick}}</h3>
                    </el-col>
                    <!--                    简述-->
                    <el-col style="margin-top: 10px">
                      <i>{{a.signature}}</i>
                    </el-col>

                  </el-row>

                  <el-row v-if="a.concerned">
                    <el-button @click="deleteFollowByUserId(a.id, a.bloggerId)" style="float: right;margin-right: 30px; margin-top: -50px" round>已关注</el-button>
                  </el-row>
                  <el-row v-else>
                    <el-button @click="insertFollowByUserId(a.id, a.bloggerId)" style="float: right;margin-right: 30px; margin-top: -50px" round>关 注</el-button>
                  </el-row>
                </el-card>
              </el-col>
            </el-row>
            <!--**********关注博主列表结束*********-->
          </el-card>

        </el-tab-pane>
        <el-tab-pane label="粉丝" name="fans">
          <el-card class="box-card">

            <!--**********粉丝列表开始*********-->
            <el-row>
              <el-col v-for="a in followArr">
                <el-card style="margin-bottom: 10px;height: 100px;overflow:hidden" >
                  <el-row>
                    <el-col :span="18" align="left" style="margin-top: -30px">
                      <h3>{{a.nick}}</h3>
                    </el-col>
                    <!--                    简述-->
                    <el-col style="margin-top: 10px">
                      <i>{{a.signature}}</i>
                    </el-col>

                  </el-row>

                </el-card>
<!--                <el-row v-if="concernedFans">
                  <el-button @click="insertFollowByUserId(a.id)" style="float: right;margin-right: 30px; margin-top: -80px" round>已关注</el-button>
                </el-row>
                <el-row v-else>
                  <el-button @click="deleteFollowByUserId(a.id,a.bloggerId)" style="float: right;margin-right: 30px; margin-top: -80px" round>关 注</el-button>
                </el-row>-->
              </el-col>
            </el-row>
            <!--**********粉丝列表结束*********-->
          </el-card>
        </el-tab-pane>
      </el-tabs>
    </el-card>

    <!--弹窗：添加/修改-->
    <template>
      <div>
        <el-dialog
            append-to-body
            :visible.sync="dialogVisible"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            width="40%"
            @close="">
          <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="180px" class="demo-ruleForm">

            <el-form-item prop="avatar">
              <el-upload
                  class="avatar-uploader"
                  action="http://localhost:9090/upload"
                  :show-file-list="false"
                  :on-success="handleSuccess">
                <img v-if="this.ruleForm.avatar" :src="this.ruleForm.avatar" style="width: 178px;height: 178px;display: block">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>

            <el-form-item label="账  号" prop="username">
              <el-input v-model="ruleForm.username" maxlength="15" show-word-limit clearable
                        style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="密  码" prop="password">
              <el-input v-model="ruleForm.password" maxlength="15" show-word-limit clearable
                        style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="昵  称" prop="nick">
              <el-input v-model="ruleForm.nick" maxlength="15" show-word-limit clearable
                        style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="手机号" prop="phone">
              <el-input v-model="ruleForm.phone" maxlength="11" show-word-limit clearable
                        style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="个性签名" prop="signature">
              <el-input v-model="ruleForm.signature" maxlength="25" show-word-limit clearable
                        style="width: 300px;"></el-input>
            </el-form-item>

            <el-form-item label="用户角色" prop="optionsSelectEcho">

              <el-switch
                  v-model="ruleForm.gender"
                  active-color="#F56C6C"
                  inactive-color="#409EFF"
                  :active-value="0"
                  :inactive-value="1"
                  active-text="女"
                  inactive-text="男"
                  style="bottom: 1px;margin-left: 60px"
              ></el-switch>
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="submitForm()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm:{
        id: '',
        username: '',
        password: '',
        avatar: 'https://dome1as32465.oss-cn-chengdu.aliyuncs.com/2022-08-11/4623f6fe-d818-4abe-80b6-48b3e233dea2.jpg',
        nick: '',
        gender: 1,
        phone: '',
        signature: '',
      },
      userUserAddNewDTO:{
        bloggerId:''
      },
      avatarUrl:'https://laochengdu.oss-cn-chengdu.aliyuncs.com/2022-07-18/66bac3e7-22da-49b4-b27d-23405739eafa.jpg',
      avatarFarDelete:'',             // 存储需要删除的OSS中的图片
      dialogVisible: false, //弹框状态
      noneBtnImg:false,     // 隐藏上传按钮
      i:5,
      auditStatus:2,
      active:"1",
      categoryArr:[],
      log:"登录",
      wd:"",
      countAllSize:'',    // 消息数量标记
      concernedFans: false,  //是否关注粉丝
      count2: 0, //用户发表文章数(审核通过)
      count1: 0, //用户发表文章数(审核中)
      count3: 0, //用户发表文章数(审核失败)
      favoritrCount: 0, //用户收藏文章数
      historyCount: 0,  //浏览历史数
      followCount: 0, //用户关注博主数
      fansCount: 0, //粉丝数量
      activeName: 'second',
      activeName1: 'second1',
      user:[],
      articleArr:[{title:"曹俊",brief:"是猪儿虫",tags:[1111,22222], gmtCreatePush:"123", praiseCount:"123", commentCount:"123",viewCount:"123"},],  //用户数据
      collectionArticleArr:[
          {title:"曹俊",brief:"是猪儿虫",tags:[1111,22222], gmtCreatePush:"123", praiseCount:"123", commentCount:"123",viewCount:"123",collectionTime:"2002-02-12",message:"长得丑"}
      ], //用户审核通过文章
      followArr: [], //用户关注博主列表
      fansArr: [],  //粉丝列表
      historyArr: [
        {articleId:0,nick:'',title:'',viewTime:''}
      ],  //浏览历史列表
      rules: {
        username: [
          {required: true, message: '请输入账号', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        password: [
          {required: true, message: '请输入密码', trigger: 'blur'},
          {min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur'}
        ],
        nick: [
          {required: true, message: '请输入昵称', trigger: 'blur'},
          {min: 2, max: 15, message: '长度在 2 到 15 个字符', trigger: 'blur'}
        ],
        phone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '长度为11个字符', trigger: 'blur'}
        ],
      },                // 输入验证
    };
  },

  methods: {
    //关注用户
    insertFollowByUserId(id, bloggerId){
      this.userUserAddNewDTO.bloggerId = bloggerId;
      console.info(bloggerId)
      this.axios.post('http://localhost:9090/follows/insertUserUser',this.userUserAddNewDTO).then((response) => {
        console.info(response.data)
        switch (response.data.code) {
          case 200:
            console.info(this.followArr);
            for (let i = 0; i < this.followArr.length; i++) {
              if (this.followArr[i].bloggerId === bloggerId){
                this.followArr[i].concerned = true;
              }
            }
            this.$message({
              message: response.data.data,
              type: 'success'
            });
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }

      })
    },

    // 取消关注
    deleteFollowByUserId(id, bloggerId){
      console.info(bloggerId)
      this.userUserAddNewDTO.bloggerId = bloggerId;
      this.axios.post('http://localhost:9090/follows/deleteUserUserById',this.userUserAddNewDTO).then((response) => {
        console.info(response.data);
        switch (response.data.code) {
          case 200:
            for (let i = 0; i < this.followArr.length; i++) {
              if (this.followArr[i].bloggerId === bloggerId){
                this.followArr[i].concerned = false;
              }
            }
            this.$message({
              message: response.data.data,
              type: 'success'
            });
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }

      })

    },

    //根据文章id删除文章
    deleteByarticleId(id){
      this.axios.post("http://localhost:9090/system/articles/delete?id="+id).then((response) => {

        switch (response.data.code) {
          case 200:
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
        this.location.reload();
      })
    },

    /*首页*/
    localPage(){
      this.$router.push({
        path: '/',
      })
    },

    /*ES查询*/
    search(){
      //TODO /*跳转页面404*/
      if(this.wd==''||this.wd==null){
        this.$router.push({
          path:'/404',
          // query: {
          //   id:index
          // }
        })
      }
      let url ='http://localhost:9090/api/search'
      let data={
        keyword:this.wd,
        page:this.currentPage,
        pageSize:this.pageSize
      }
      this.axios.post(url,data).then((response)=>{
        console.log(response)

        this.articleArr=response.data.data.list
        this.total=this.articleArr.length
      })
    },

    /*分类详情跳转*/
    categoryDetail(index){
      this.$router.push({
        path:'/category',
        query: {
          id:index
        }
      })

    },
    //文章详情跳转
    sentMesg(index){

      this.$router.push({
        path:'/detail',
        query: {
          id:index
        }
      })
    },

    /*个人中心跳转*/
    userCenter(){

      if(this.Token==null||this.Token==''){
        this.$message({
          message: '对不起，您还未登录，请您先登录',
          type: 'warning'
        });
      }else{
        this.$router.push({
          path:'/userCenter',
        })

      }
    },

    /*消息中心*/
    messageCenter(){
      if(this.Token==null||this.Token==''){
        this.$message({
          message: '对不起，您还未登录，请您先登录',
          type: 'warning'
        });
      }else {
        this.$router.push({
          path: '/messageCenter',
        })
      }
    },

    /*登录*/
    login() {
      switch (this.log) {
        case "登录":
          this.$router.push({
            path:'/login',
          })
          this.log='退出登录'
          break;

        case "退出登录":
          this.$confirm('是都退出当前登录用户?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            localStorage.removeItem("jwt"),
                //刷新页面
                setTimeout(()=>{
                  this.$router.push('/');
                  //延迟时间：0.8秒
                },800)
            this.log='登录'
            this.Token=''
            this.avatarUrl='https://laochengdu.oss-cn-chengdu.aliyuncs.com/2022-07-18/66bac3e7-22da-49b4-b27d-23405739eafa.jpg'

          });
          break
      }
    },

    /*文章发布*/
    publish(){
      if(this.Token==null||this.Token==''){
        this.$message({
          message: '对不起，您还未登录，请您先登录',
          type: 'warning'
        });
      }else {
        this.$router.push({
          path: '/publish',
        })
      }
    },

    /*分页浏览历史数量*/
    historyCountCount(){
      this.axios.get("http://localhost:9090/history/count").then((response) => {
        switch (response.data.code) {
          case 200:
            this.historyCount = response.data.data;
            console.log("浏览历史数量" + this.historyCount)
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取浏览历史*/
    historyList(pageSize){
      console.log("-====pageSize:" + pageSize)
      this.axios.get("http://localhost:9090/history/list?&pageSize=" + pageSize).then((response) => {
        console.log(response)
        this.historyArr = response.data.data;
      })
    },

    /*用户资料*/
    cardPopup(){
      //获取用户详情信息
      this.axios.get("http://localhost:9090/api/user/userDeatil").then((response) => {
        console.log(response.data.data);

        switch (response.data.code) {
          case 200:
            this.ruleForm = response.data.data;
            this.ruleForm.password = "******";
            console.log(this.collectionArticleArr);
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
      this.dialogVisible = true;
    },

    /**
     * 功能：用户上传头像成功
     */
    handleSuccess(response, file, fileList) {
      this.noneBtnImg = true;
      console.log("上传文件成功!")
      console.log("response=" + response)
      console.log("file=" + file);
      this.ruleForm.avatar = response;
      this.avatarFarDelete = response;
    },

    /**
     * 业务：添加 OR 修改
     */
    submitForm() {
      let addOrSetData = this.ruleForm;
      if (addOrSetData.username === null || addOrSetData.username === undefined || addOrSetData.username === '') {
        this.$message({type: 'error', message: "账号不能为空"})
        return;
      }
      if (addOrSetData.password === null || addOrSetData.password === undefined || addOrSetData.password === '') {
        this.$message({type: 'error', message: "密码不能为空"})
        return;
      }
      if (addOrSetData.nick === null || addOrSetData.nick === undefined || addOrSetData.nick === '') {
        this.$message({type: 'error', message: "昵称不能为空"})
        return;
      }
      if (addOrSetData.phone === null || addOrSetData.phone === undefined || addOrSetData.phone === '') {
        this.$message({type: 'error', message: "电话号码不能为空"})
        return;
      }
      let path = "http://localhost:9090/api/user/updateUserByUserId"
      if (addOrSetData.password === "******") {
        addOrSetData.password = ""
      }

      /**
       * 修改用户
       */
      this.axios.post(path, addOrSetData).then((response) => {
        switch (response.data.code) {
          case 200:
            this.$message({
              type: 'success',
              message: '修改用户成功!'
            });
            this.cardPopup();
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
      this.closeDialog();
      this.dialogVisible = false;   // 关闭弹窗
    },
    /**
     * 清除弹窗数据及遗留效果
     */
    closeDialog(ruleForm) {

      if (this.$refs[ruleForm] !== undefined) {
        this.$refs[ruleForm].resetFields();
      }
    },

    /*查询用户文章相关列表*/
    handleClick() {
      console.log(this.activeName1);
      let name = this.activeName;
      //查询用户发表成功文章
      if (name === "second" && this.activeName1 === "second1"){
        this.i = 5;
        this.auditStatus = 2;
        this.load(this.i, this.auditStatus);
      }
      //查询用户发表文章(待审核)
      if (name === "second" && this.activeName1 === "second2"){
        this.i = 5;
        this.auditStatus = 1;
        this.articleCountByUserId1();
        this.load(this.i, this.auditStatus);
      }
      //查询用户发表失败文章
      if (name === "second" && this.activeName1 === "second3"){
        this.i = 5;
        this.auditStatus = 3;
        this.articleCountByUserId3();
        this.load(this.i, this.auditStatus);
      }
      if (name === "third"){
        this.i = 5;
        this.favoritrArticle(this.i);
      }
      if (name === "follow"){
        this.i = 5;
        this.followList(this.i);
      }
      if (name === "fans"){
        this.i = 5;
        this.fansList(this.i);
      }
      if (name === "history"){
        this.i = 5;
        this.historyList(this.i);
      }
    },
    /*判断是否触底*/
    handleScroll(e) {
      const {scrollTop, clientHeight, scrollHeight} = e.target
      // console.log(scrollTop, clientHeight, scrollHeight)

      if (scrollTop + clientHeight === scrollHeight) {
        //alert('滚动到底部啦')
        if (this.count2 > this.i && this.activeName === "second" && this.activeName1 === "second1") {
          this.i += 5;
          this.load(this.i, 2);
        }else if(this.count1 > this.i && this.activeName === "second" && this.activeName1 === "second2"){
          this.i += 5;
          this.load(this.i, 1);
        }else if(this.count3 > this.i && this.activeName === "second" && this.activeName1 === "second3"){
          this.i += 5;
          this.load(this.i, 3);
        }else if(this.followCount > this.i && this.activeName === "follow"){
          this.i += 5;
          this.followList(this.i);
        }else if(this.followCount > this.i && this.activeName === "fans"){
          this.i += 5;
          this.fansList(this.i);
        } else if (this.favoritrCount > this.i && this.activeName === "third"){
          this.i += 5;
          this.favoritrArticle(this.i);
        } else if (this.favoritrCount > this.i && this.activeName === "history"){
          this.i += 5;
          this.historyList(this.i);
        }else{
          this.$message({
            message: '到底了',
            type: 'success'
          });
        }
      }
    },
    /*分页查询用户收藏文章*/
    favoritrArticle (i) {
      console.log(i);
      this.axios.get("http://localhost:9090/api/articles/favoritr?pagSize=" + i).then((response) => {
        console.log(response.data.data);

        switch (response.data.code) {
          case 200:
            this.collectionArticleArr = response.data.data;
            console.log(this.collectionArticleArr);
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*分页查询用户发表文章*/
    load (pagSize, auditStatus) {
      console.info(auditStatus)
      var params = new URLSearchParams();
      params.append("pagSize", pagSize);
      params.append("auditStatus", auditStatus);

      //this.axios.get("http://localhost:8090/articles?pagSize=" + i + "&examineStatus=" + examineStatus).then((response) => {
      this.axios.post("http://localhost:9090/api/articles", params).then((response) => {
        console.log(response.data.data);

        switch (response.data.code) {
          case 200:
            this.articleArr = response.data.data;
            console.log(this.articleArr);
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },

    /*获取用户信息*/
    userInformation(){
      this.axios.get("http://localhost:9090/api/user").then((response) => {
        console.log(response.data.data);

        switch (response.data.code) {
          case 200:
            this.user = response.data.data;
            console.log(this.user);
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户文章数(审核通过)*/
    articleCountByUserId2(){
      var params = new URLSearchParams();
      params.append("auditStatus", this.auditStatus);
      this.axios.post("http://localhost:9090/api/articles/countByUserId", params).then((response) => {
        console.log("用户发表文章数:" + response.data.data);

        switch (response.data.code) {
          case 200:
            this.count2 = response.data.data;
            console.log(this.count2);
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户文章数(审核中)*/
    articleCountByUserId1(){
      var params = new URLSearchParams();
      params.append("auditStatus", this.auditStatus);
      this.axios.post("http://localhost:9090/api/articles/countByUserId", params).then((response) => {
        console.log("用户发表文章数:" + response.data.data);

        switch (response.data.code) {
          case 200:
            this.count1 = response.data.data;
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户文章数(审核失败)*/
    articleCountByUserId3(){
      var params = new URLSearchParams();
      params.append("auditStatus", this.auditStatus);
      this.axios.post("http://localhost:9090/api/articles/countByUserId", params).then((response) => {
        console.log("用户发表文章数:" + response.data.data);

        switch (response.data.code) {
          case 200:
            this.count3 = response.data.data;
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户收藏文章数*/
    favoritrCountByUserId(){
      this.axios.get("http://localhost:9090/favorites/countByUserId").then((response) => {

        switch (response.data.code) {
          case 200:
            this.favoritrCount = response.data.data;
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户关注博主数*/
    followCountCount(){
      this.axios.get("http://localhost:9090/follows/counts").then((response) => {
        console.log("用户收藏文章数:" + response.data.data);

        switch (response.data.code) {
          case 200:
            this.followCount = response.data.data;
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户关注博主列表*/
    followList(pagSize){
      console.log("查询条数:"+pagSize);
      var params = new URLSearchParams();
      params.append("pagSize", pagSize);
      this.axios.post("http://localhost:9090/api/user/follows", params).then((response) => {

        switch (response.data.code) {
          case 200:
            this.followArr = response.data.data;
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户粉丝数*/
    fansCountCount(){
      this.axios.get("http://localhost:9090/follows/countFans").then((response) => {
        switch (response.data.code) {
          case 200:
            this.fansCount = response.data.data;
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    /*获取用户粉丝列表*/
    fansList(pagSize){
      console.log("查询条数:"+pagSize);
      var params = new URLSearchParams();
      params.append("pagSize", pagSize);
      this.axios.post("http://localhost:9090/api/user/fans", params).then((response) => {

        switch (response.data.code) {
          case 200:
            this.followArr = response.data.data;
            break;
          default:
            this.$message({
              type: 'error',
              message: response.data.message
            })
            break;
        }
      })
    },
    // 查询消息数量
    countAllSizeMounted() {

      if (this.Token === null || this.Token===''){
        return
      }
      this.axios.get("http://localhost:9090/system/message/push/ReadStatusCount").then((response) => {
        if (response.data !== 0) {
          this.countAllSize = response.data
        }
      })
    },
    // 设置所有消息为已读
    countAllSizeMountedClick(){
      if (this.countAllSize !== '' ){
        this.axios.get("http://localhost:9090/system/message/push/updateReadStatusAll");
      }

      this.$router.push('/MessagePushView');
    },
  },
  created() {



    /*判断jwt*/
    this.Token = localStorage.getItem("jwt")
    if(this.Token!=null||this.Token!=''){
      let url='http://localhost:9090/api/user/selectUser'
      this.axios.create({
        headers:{
          'Authorization':this.Token
        }
      }).get(url).then((response)=>{

        let json =response.data;
        if(json.code==200){
          this.avatarUrl=json.data.avatar
          this.log='退出登录'
        }else {

        }
      });

    }else{
      this.log='登录'
    }

    /*执行文章分类查询*/
   let url ='http://localhost:9090/api/category';
    this.axios.get(url).then((response)=> {
      console.log(response)
      this.categoryArr=response.data.data

    })

    this.userInformation();
    this.articleCountByUserId2();
    this.favoritrCountByUserId();
    this.followCountCount();
    this.fansCountCount();
    this.historyCountCount();
    if (this.i == 5){
      this.load(this.i, 2);
    }
  }
}
</script>


<style scoped>
.bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: url('https://ts1.cn.mm.bing.net/th/id/R-C.51676491f69a1c1b3b043035c7565760?rik=ahRHaUMH3E02lg&riu=http%3a%2f%2fwww.kuaipng.com%2fUploads%2fpic%2fb%2f2019%2f09-13%2f69781%2fbeijing_pic_69781_1200_600.jpg&ehk=F9XpXpcQR%2f3zuIkcEWrvMl8myfV4bm%2fwfw4lDwMbVy8%3d&risl=&pid=ImgRaw&r=0') no-repeat;
  background-size: 100% 100%;
  overflow: auto;
}
body{
  -moz-user-select: none;
}

#login {
  height: 320px;
  width: 350px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.25);
  background: #ffffff;
  opacity: 0.85;
  position: absolute;
  top: 20%;
  left: 40%;
  text-align: center;
  display: flex;
  flex-direction: column; /*横向*/
  padding: 30px;
  border-radius: 15px;
}

#login h2 {
  padding-bottom: 30px;
}

.btn {
  width: 80%;
  margin: auto;
}

.reg {
  float: right;
  height: 10px;
  line-height: 20px;
  position: relative;
  top: -10px;
}
a{
  color: #908f8f;
  text-decoration:none;
}

</style>

